<template>
  <div id="app">
    <div class="layout">
      <Header />
      <div class="container">
        <div class="map-info">
          <div class="item-name">
            <div class="item-name-left"><b>人员轨迹</b></div>
            <div class="item-name-right">
              <el-button type="primary" link :icon="RefreshLeft" @click="handleRenderingPeopleOnMap">返回所有</el-button>
            </div>
          </div>
          <div class="map">
            <Polyline v-if="mapStore.polylineVisible" :key="mapStore.polylineKey" />
            <Point v-if="mapStore.pointVisible" :key="mapStore.pointKey" />
            <AllPoints v-if="mapStore.allPointsVisible" :key="mapStore.allPointsKey" />
          </div>
        </div>

        <div class="trajectory">
          <div class="item-name">
            <div class="item-name-left"><b>人员信息</b></div>
            <div class="item-name-right">
              <el-button type="primary" link :icon="Search"
                @click="searchDialogRef.dialogFormVisible = true">搜索</el-button>
            </div>
          </div>
          <TrajectoryDetails />
        </div>
      </div>
    </div>

    <SearchDialog ref="searchDialogRef" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { RefreshLeft, Search } from "@element-plus/icons-vue";
import Header from "@/components/Header.vue";
import SearchDialog from "@/components/SearchDialog.vue";
import Polyline from "@/components/Polyline.vue";
import Point from "@/components/Point.vue";
import AllPoints from "@/components/AllPoints.vue";
import TrajectoryDetails from "@/components/TrajectoryDetails.vue";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const searchDialogRef = ref(null);

const handleRenderingPeopleOnMap = () => {
  mapStore.polylineVisible = false;
  mapStore.pointVisible = false;
  mapStore.allPointsVisible = true;
};

onMounted(() => {
  handleRenderingPeopleOnMap();
});
</script>

<style scoped>
@import url("@/assets/main.css");

#app {
  width: 100%;
  min-width: 1440px;
  height: 100%;
  font-weight: normal;
  background: #0c5eaa url("@/assets/images/bg6.png") no-repeat scroll center 0;
  background-size: cover;
}

.layout {
  height: 100% !important;
  width: 100% !important;
}

.container {
  display: flex;
  padding: 10px;
  height: calc(100vh - 121px);
  /* background: rgba(234, 242, 246, 1); */
}

.map-info {
  flex: 1;
  height: 100%;
  min-width: 440px;
  /* background: rgba(255, 255, 255, 1); */
}

.item-name {
  height: 30px;
  line-height: 20px;
  padding-left: 15px;
  display: flex;
  justify-content: space-between;
  background: url("@/assets/images/titbg.png") no-repeat scroll left center;
  background-size: cover;
}

.item-name-left b {
  font-size: 16px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 1px #000;
}

.item-name-right {
  font-size: 14px;
}

.map {
  height: calc(100vh - 172px);
}

.trajectory {
  width: 930px;
  height: 100%;
  margin-left: 10px;
  overflow: auto;
  /* background: rgba(255, 255, 255, 1); */
}
</style>
